$(function() {
    let box = $(".box");
    let boxContainer = $('.box .box-container');
    let WHObj = {
        columnNum: 9, // 一行最大列数
        rowNum: 8, // 行数
        rate: $(".box-container>div>a").width() / $(".box-container>div>a").height(), // a标签宽高比
    };
    let minWidth = 1;// 缩放的最小宽度（单位跟随a标签）
    let minHeight = 1;// 缩放的最小高度

    box.on('mousedown', function(e) {
        let posX = e.clientX; //鼠标点击时候的位置
        let posY = e.clientY; //鼠标点击时候的位置
        let preLeft = boxContainer.css("left");
        let preTop = boxContainer.css("top");
        $(document).on('mousemove', function(e) {
            e.preventDefault(); // 防止发生点击事件
            let moveX = e.clientX - posX; //鼠标x轴方向拖动距离
            let moveY = e.clientY - posY; //鼠标y轴方向拖动距离
            let fixLeft = parseInt(preLeft.substring(0, preLeft.length - 2)) + moveX;
            let fixTop = parseInt(preTop.substring(0, preTop.length - 2)) + moveY;

            // 控制拖动范围
            let minTop = -1 * (WHObj.rowNum - 1) * $(".box-container>div").height();
            let maxTop = $(".box").height() - $(".box-container>div").height();
            let maxLeft = $(".box").width() - $(".box-container>div>a").outerWidth(true);
            let minLeft = -1 * (WHObj.columnNum - 1) * $(".box-container>div>a").outerWidth(true);

            if (fixLeft > maxLeft) fixLeft = maxLeft;
            if (fixLeft < minLeft) fixLeft = minLeft;
            if (fixTop < minTop) fixTop = minTop;
            if (fixTop > maxTop) fixTop = maxTop;

            // 设置拖动结果
            boxContainer.css("left", fixLeft + "px");
            boxContainer.css("top", fixTop + "px");
        })
        //清空事件
        $(document).on('mouseup', function() {
            $(this).unbind();
        })
    }).bind("mousewheel", function(e, d) {
        e.preventDefault();
        let obj = $(".box-container a.mumber");
        let boxContainer = $('.box .box-container');
        let preLeft = parseInt(boxContainer.css("left").substring(0, boxContainer.css("left").length - 2));
        let preTop = parseInt(boxContainer.css("top").substring(0, boxContainer.css("top").length - 2));

        // 通过调整每个a标签的宽高达到放大缩小的作用，对应的调整left和top使界面中心不变（暂未做到，只是近似）
        if (d < 0) {
            if ((obj.height() * 0.8 < minHeight || (obj.height() * 0.8 * WHObj.rate) < minWidth)) {
                return;
            }
            obj.height(obj.height() * 0.8);
            obj.width(obj.height() * 0.8 * WHObj.rate);
            boxContainer.css("top", preTop * 0.8 / WHObj.rate);
            boxContainer.css("left", preLeft * 0.8);
        } else {
            obj.height(obj.height() * 1.2);
            obj.width(obj.height() * 1.2 * WHObj.rate);
            boxContainer.css("top", preTop * 1.2 / WHObj.rate);
            boxContainer.css("left", preLeft * 1.2 + "px");
        }

        boxContainer.css("font-size", 12 / 40 * obj.height() + "px");
        obj.css("line-height", obj.height() + "px");

    });
});